<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
    .ctn{
      width: 100%;
      height: 500px;

      white-space: nowrap;
      overflow: hidden;
      overflow-x: auto;

      -webkit-backface-visibility: hidden;
      -webkit-perspective: 1000;
      -webkit-overflow-scrolling: touch; /* 2 */
      text-align: justify; /* 3 */
      &::-webkit-scrollbar {
          display: block;
      }
    }
    .ctn > div {
      width: 30%;
      height: auto;
      background-color: #f5f5f5;
      border:2px solid #ccc;
      border-radius:6px;
      display: inline-block;
      vertical-align: top;
    }

    #child1{

      overflow:scroll;
    }
    #child1 > ul > li{
      height: 40px;

    }
    .child2{
      background-color: white;
    }
    .child3{
      background-color: blue;
    }
    .child4{
      background-color: orange;
    }
    .child5{
      background-color: yellow;
    }
    </style>

  </head>
  <body>
    <div class="ctn">
      <div id="child1">
        <ul>
          <li>test</li>

          <li>test</li>
          <li>---------</li>
        </ul>
      </div>
      <div class="child2"></div>
      <div class="child3"></div>
      <div class="child4">
        <ul>
          <li>test</li>

          <li>test</li>
          <li>---------</li>
        </ul>
      </div>
      <div class="child5"></div>
      <div class="child4"></div>
      <div class="child5"></div>
    </div>


  </body>
</html>
